import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import LoadingSpinner from '@/components/LoadingSpinner.vue'
import ErrorBoundary from '@/components/ErrorBoundary.vue'
import NotFound from '@/views/NotFound.vue'

Vue.use(VueRouter)
Vue.component('LoadingSpinner', LoadingSpinner)
Vue.component('ErrorBoundary', ErrorBoundary)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => ({
      component: import('../views/About.vue'),
      loading: LoadingSpinner,
      error: ErrorBoundary,
      delay: 200,
      timeout: 10000
    })
  },
  {
    path: '/projects',
    name: 'Projects',
    component: () => ({
      component: import('../views/Projects.vue'),
      loading: LoadingSpinner,
      error: ErrorBoundary,
      delay: 200,
      timeout: 10000
    })
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => ({
      component: import('../views/Contact.vue'),
      loading: LoadingSpinner,
      error: ErrorBoundary,
      delay: 200,
      timeout: 10000
    })
  },
  {
    path: '*',
    name: 'NotFound',
    component: NotFound
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({ x: 0, y: 0 })
        }, 100)
      })
    }
  }
})

router.beforeEach((to, from, next) => {
  // document.title = to.name ? `${to.name} - 南有乔木不可休思` : '南有乔木不可休思'
  document.title = '南有乔木不可休思'
  next()
})

export default router 